function generatePage() {

    let pageInfo = getPageInfoRemote();

    fillTableBody(pageInfo);

}

function getPageInfoRemote() {

    $.ajax({
        "url": "role/get/page/info.json",
        "type": "post",
        "data": {
            "pageNum": window.pageNum,
            "pageSize": window.pageSize,
            "keyword": window.keyword
        },
        "dataType": "json",
        "success": function (response) {
            let pageInfo = response.data;
            fillTableBody(pageInfo)
        },
        "error": function (response) {
            console.log("服务器端调用失败");
            return null;
        }
    });


}

function fillTableBody(pageInfo) {

    $("#rolePageTBody").empty();
    $("#Pagination").empty();

    if (pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0) {
        $("#rolePageTBody").append("<tr><td colspan='4'>没有查询到您要的数据</td></tr>")
        return;
    }
    for (let i = 0; i < pageInfo.list.length; i++) {

        let role = pageInfo.list[i];

        let roleId = role.id;

        let roleName = role.name;

        let numberTd = "<td>" + (i + 1) + "</td>";
        let checkboxTd = "<td><input type='checkbox'></td>";
        let roleNameTd = "<td>" + roleName + "</td>";

        let checkBtn = "<button type='button' id='" + roleId + "' class='btn btn-success btn-xs checkBtn'><i class=' glyphicon glyphicon-check'></i></button>"

        // 铅笔按钮用于修改role信息。用id属性（也可以是其他属性）携带当前的角色的id，class添加一个pencilBtn，方便添加响应函数
        let pencilBtn = "<button type='button' id='" + roleId + "' class='btn btn-primary btn-xs pencilBtn'><i class=' glyphicon glyphicon-pencil'></i></button>"

        let removeBtn = "<button type='button' id='" + roleId + "' class='btn btn-danger btn-xs removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>"

        let buttonTd = "<td>" + checkBtn + " " + pencilBtn + " " + removeBtn + "</td>";
        let tr = "<tr>" + numberTd + checkboxTd + roleNameTd + buttonTd + "</tr>";

        $("#rolePageTBody").append(tr);

    }

    generateNavigator(pageInfo);

}

function generateNavigator(pageInfo) {

    let totalRecord = pageInfo.total;

    let properties = {
        num_edge_entries: 3,
        num_display_entries: 5,
        callback: paginationCallBack(),
        items_per_page: pageInfo.pageSize,
        current_page: pageInfo.pageNum - 1,
        prev_text: "上一页",
        next_text: "下一页"
    }

    $("#Pagination").pagination(totalRecord, properties);

}

function paginationCallBack(pageIndex, jQuery) {

    // 修改全局变量的pageNum
    window.pageNum = pageIndex + 1;

    generatePage()

    return false;

}